feat(aci): Add empty states for Monitors / Alerts#113126
Conversation
github-actions
bot
added
the
Scope: Frontend
| @@ -190,6 +219,10 @@ export function AutomationListTable({ | |||
| ); | |||
| } | |||
|
|
|||
| const StyledFlex = styled(Flex)` | |||
| padding: 56px; | |||
There was a problem hiding this comment.
don't love this, didn't see anything for 56px in the styles though. should i just use 64px since that's in size? 🤔
There was a problem hiding this comment.
Yeah I'd just use what's in the design tokens unless it makes the component look markedly worse
There was a problem hiding this comment.
tbh we should probably have a better empty state component in the design system, that could be coming eventually
| <SimpleTable.Empty> | ||
| <StyledFlex gap="xl" direction="column" align="center"> | ||
| <img src={NoAlertsImage} /> | ||
| <Text as="h5">{t('No alerts found.')}</Text> |
There was a problem hiding this comment.
I think you want Heading instead
| to={{ | ||
| pathname: makeMonitorBasePathname(organization.slug), | ||
| query: { | ||
| query: decodeScalar(location.query?.query), |
There was a problem hiding this comment.
nit: you could use nuqs for the query keys:
const [query] = useQueryState('query', parseAsString)
There was a problem hiding this comment.
If you run this through svgo (fastest way is through the svgo.dev playground) you can reduce the size by quite a bit
There was a problem hiding this comment.
👍 will do.
as an aside, i'd have thought that is something part of the build system so public assets are always improved. maybe a thing we can bring up sometime?
There was a problem hiding this comment.
Yeah that could be good to bring up for a frontend TSC, I think Evan has talked about such a thing before. Could also be part of the PR CI checks
saponifi3d
force-pushed
the
jcallender/aci/iswf-2410
branch
from
7ac2ab2 to
48b5812
Compare
2 participants
Description
This adds a new empty state to the list views.
Screen.Recording.2026-04-15.at.2.54.19.PM.mov
Figma